<!DOCTYPE html>
<html lang="ch-CN">
<!--
@name:
@description:
@author: mr.ck
@title: talk is cheap, show me the code!!!
@time: 2021-03-26 16:51:33
-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Title</title>
    <link rel="stylesheet" href="./bootstrap-dist/css/bootstrap.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,body{
            width: 100%;
            height: 100%;
        }

        .container-xl {
            height: 100%;
        }

        .header {
            width: 100%;
            height: 32%;
            background-color: #3d9bf3;
            background: url("./img/mypage.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
        .liushui{
            position: relative;
            font-size: 18px;
            left: 80px;
        }
        .body {
            width: 100%;
            height: 55%;
        }

        .bottom {
            height: 13%;
        }

        .header>p {
            padding-top: 30px;
            text-align: center;
            font-family: 黑体;
            color: #eeeeeef5;
        }

        .header > img {
            width: 20px;
            position: absolute;
            right: 10px;
            top: 30px;
        }

        .header .img-jiao {
            position: absolute;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: url("./imgCK/iconmonstr-photo-camera-thin-32.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 15px;
            background-color: #9fcdff;
            top: 140px;
            right: 160px;
        }

        .header-c {
            height: 100px;
        }

        .header-c > div {
            width: 100px;
            height: 100%;
            border: 1px solid #bdb9b9e6;
            border-radius: 50%;
            margin: 0 auto;
            background: url("./logo/user.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: inherit;
        }

        .header-c .userName {
            text-align: center;
            color: #eeeeeef5;
            margin-top: 3px;
            margin-bottom: 0px;
        }

        .header-c .userInfo {
            margin-bottom: 0px;
            text-align: center;
        }

        .userInfo > span {
            color: #eeeeeef5;
            font-size: 5px;
        }

        .list-group-item > img {
            position: absolute;
            right: 20px;
            width: 22px;
        }

        .list-group-item:hover {
            background-color: #f3f3f3;
        }
    </style>
</head>
<body>
    <div class="container-xl p-0" style="background-color: #EFEFF4">
        <div class="header">
            <p>个人中心</p>
            <img src="./imgCK/settings.svg" alt="">
            <div onclick="getImage()" class="img-jiao">
            </div>
            <div class="header-c">
                <div></div>
                <p class="userName">username</p>
                <p class="userInfo">
                    <span>等级:12</span>
                    &nbsp;
                    <span>积分:108</span>
                </p>
            </div>
        </div>

        <div class="body " style="background-color: #EFEFF4">
            <ul class="list-group mb-2">
                <li class="list-group-item">
                    修改密码
                    <img src="./imgCK/iconmonstr-angel-right-thin-24.png" alt="">
                </li>
                <li class="list-group-item">
                    更换头像
                    <img src="./imgCK/iconmonstr-angel-right-thin-24.png" alt="">
                </li>
                <li class="list-group-item">
                    绑定手机
                    <img src="./imgCK/iconmonstr-angel-right-thin-24.png" alt="">
                </li>
                <li class="list-group-item">
                    更换绑定手机
                    <img src="./imgCK/iconmonstr-angel-right-thin-24.png" alt="">
                </li>
                <li class="list-group-item" id="genghuanzhuti">
                    更换主题
                    <img src="./imgCK/iconmonstr-angel-right-thin-24.png" alt="">
                </li>
                <li class="list-group-item">
                    关于我们
                    <img src="./imgCK/iconmonstr-angel-right-thin-24.png" alt="">
                </li>
            </ul>
            <button class="btn btn-danger col-8 m-auto" style="display: block">退出登录</button>
        </div>
        <div class="container">
            <div class="row fixed-bottom mb-3 border-top" style="height: 50px;">
                <div class="btn-group col-3 align-text-bottom" role="group" aria-label="First group">
                    <button type="button" id="shouYe" class="h-auto border-0 btn btn-outline-secondary"><img src="logo/shouye.svg" style="width: 16px;height: 16px"  alt=""><br><span style="font-size: 12px">首页</span></button>
                </div>
                <div class="btn-group col-3" role="group" aria-label="Second group">
                    <button type="button" class="btn border-0 btn-outline-secondary"><img src="logo/guanli.svg" style="width: 16px;height: 16px"  alt=""><br><span style="font-size: 12px">管理</span></button>
                </div>
                <div class="btn-group col-3" role="group" aria-label="Third group">
                    <button type="button" class="btn border-0 btn-outline-secondary"><img src="logo/zhangben.svg" style="width: 16px;height: 16px"  alt=""><br><span style="font-size: 12px">礼金簿</span></button>
                </div>
                <div class="btn-group col-3" id="myPage" role="group" aria-label="Forth group">
                    <button type="button" class="btn border btn-outline-secondary"><img src="logo/myself.svg" style="width: 16px;height: 16px"  alt=""><br><span style="font-size: 12px">我的</span></button>
                </div>
            </div>
        </div>
    </div>

</body>
<script src="bootstrap-dist/js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-dist/js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    $("#shouYe").click(function () {
        window.location.href="main.html";
    });
    $("#genghuanzhuti").click(function () {
        window.location.href="zhuti.html";
    });
    function getImage() {
        var cmr = plus.camera.getCamera();
        cmr.captureImage(function (p) {
            plus.io.resolveLocalFileSystemURL(p, function (entry) {
                compressImage(entry.toLocalURL(), entry.name);
            }, function (e) {
                plus.nativeUI.toast("读取拍照文件错误：" + e.message);vcxz
            });
        }, function (e) {
        }, {
            filter: 'image'
        });
    }
</script>
</html>